<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            const data = [
                {
                    x: 100,
                    y: 100,
                    img: {
                        src: "https://alpha.chainingview.io/coins/matic.png",
                        width: 50,
                        height: 50,
                        x: 0,
                        y: 0
                    },
                    text: {
                        txt: "Element 1",
                        x: 0,
                        y: 80
                    }
                },
                {
                    x: 300,
                    y: 100,
                    img: {
                        src: "https://alpha.chainingview.io/coins/usdc.png",
                        width: 50,
                        height: 50,
                        x: 0,
                        y: 0
                    },
                    text: {
                        txt: "Element 2",
                        x: 0,
                        y: 80
                    }
                },
                {
                    x: 100,
                    y: 300,
                    img: {
                        src: "https://alpha.chainingview.io/coins/usdc.png",
                        width: 50,
                        height: 50,
                        x: 0,
                        y: 0
                    },
                    text: {
                        txt: "Element 3",
                        x: 0,
                        y: 80
                    }
                },
                {
                    x: 300,
                    y: 300,
                    img: {
                        src: "https://alpha.chainingview.io/coins/usdc.png",
                        width: 50,
                        height: 50,
                        x: 0,
                        y: 0
                    },
                    text: {
                        txt: "Element 4",
                        x: 0,
                        y: 80
                    }
                }
            ];

            // 创建SVG元素
            const svgNS = "http://www.w3.org/2000/svg";
            const svg = document.createElementNS(svgNS, "svg");
            svg.setAttribute("width", window.innerWidth);
            svg.setAttribute("height", window.innerHeight);
            document.body.appendChild(svg);

            // 循环添加元素
            data.forEach(item => {
                // 创建组元素
                const group = document.createElementNS(svgNS, "g");
                group.setAttribute("transform", `translate(${item.x}, ${item.y})`);
                svg.appendChild(group);

                // 添加图片
                const image = document.createElementNS(svgNS, "image");
                image.setAttribute("href", item.img.src);
                image.setAttribute("x", item.img.x);
                image.setAttribute("y", item.img.y);
                image.setAttribute("width", item.img.width);
                image.setAttribute("height", item.img.height);
                image.setAttribute("rx", "20"); // 圆角半径
                image.setAttribute("ry", "20"); // 圆角半径
                group.appendChild(image);

                // 添加文字
                const text = document.createElementNS(svgNS, "text");
                text.setAttribute("x", item.text.x);
                text.setAttribute("y", item.text.y);
                text.setAttribute("width", item.img.width);
                text.setAttribute("height", 30);
                text.setAttribute("text-anchor", "middle"); // 文字水平居中
                text.textContent = item.text.txt;
                group.appendChild(text);
            });
        </script>

        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <foreignObject width="100%" height="100%">
                <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%">
                    <img src="https://alpha.chainingview.io/coins/matic.png" style="width: 50px; height: 50px" />
                    <div>ok</div>
                </div>
            </foreignObject>
        </svg>
    </body>
</html>
